<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- 插值语法： -->
        <h4>你好,{{name}}</h4>

    </div>

</body>

</html>
<script>
    //el&data的写法一
    /*   new Vue({
          el: '#root',//方式一 el写成属性
          data: {//方式一 对象式写法
              name: 'jack',
          }
      }) */

    //el写法二
    /*   const vm = new Vue({
          data: {//方式一 对象式写法
              name: 'jack',
          }
      });
  
      console.log(vm);//Vue对象
      //将Vue对象挂载到容器上
      vm.$mount('#root'); */


    //data的写法二
    new Vue({
        el: '#root',
        //函数式写法
        data() {
            //函数里要想返回值 return
            return {
                name: '啦啦啦啦'
            }//可以使用的值

        }
    }) 
</script>